<template>
    <!-- 企业合同 -->
    <div>
        <div class="ffffff mainpadding">
            <el-form ref="form" :model="form" label-width="80px">
                <el-row :gutter="10">
                    <el-col :span="5">
                        <el-form-item label="模板名称">
                            <el-input size="small" v-model="form.name" placeholder="请输入模板名称进行搜索"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="启用状态">
                            <el-select size="small" v-model="value" placeholder="请选择">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <div style="margin-top:5px"></div>
                        <el-button size="small" type="primary">查询</el-button>
                        <el-button size="small">重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="margin-top1 ffffff">
            <div class="mainpadding">
                <el-button size="small" type="primary" @click="newtemplate">新增模板</el-button>
                <el-button size="small">导入</el-button>
                <div class="margin-top1"></div>
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :header-cell-style="tableHeaderColor"
                    style="width: 100%;">
                    <el-table-column prop="name" label="模板名称"></el-table-column>
                    <el-table-column prop="name" label="创建人" width="120"> </el-table-column>
                    <el-table-column prop="name" label="更新人" width="120"></el-table-column>
                    <el-table-column label="时间" width="230">
                        <template slot-scope="scope">
                            <div class="tabtext inline">
                                <span class="margin-right1">始</span>
                                <span class="margin-right1">2023-29-29</span>
                                <span class="hui">19：00</span>
                            </div>
                            <div class="tabtext inline">
                                <span class="margin-right1">终</span>
                                <span class="margin-right1">2023-29-29</span>
                                <span class="hui">19：00</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="启用状态" width="120">
                        <template>
                            <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作" width="120">
                        <template>
                            <el-button type="primary" size="small">使用</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                name: ""
            },
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }],
            value: "",
            tableData: [1, 1, 1, 1]
        }
    },
    methods: {
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return 'background-color: #f7f8fa;color: #333;font-weight: 400;'
            }
        },
        // 跳转新增模板
        newtemplate() {
            this.$router.push({ path: "/newTemplate" },()=>{})
        }
    }
}
</script>

<style lang="sass" scoped>
    
</style>